<!doctype html>
<html lang="en" data-theme="Balzac">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Balzac HTML Template</title>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

        <!-- theme -->
        <link id="theme-css" rel="stylesheet" href="css/theme.css">
        <!--[if IE 9]><link rel="stylesheet" href="css/ie9.css"><![endif]-->

    </head>

    <body>

        <div class="bh-header" data-uk-sticky="{top:-1}">
            <div class="bh-navbar">

                <a class="bh-logo uk-visible-large" href="frontpage.html"><div class="uk-navbar-brand"><span class="uk-text-primary">Bal</span>zac</div></a>

                <a class="bh-logo-small uk-hidden-large" href="frontpage.html"><div class="uk-navbar-brand"><span class="uk-text-primary">Bal</span>zac</div></a>

                <!-- img use like this -->
                <!-- <a class="bh-logo" href="frontpage.html">
                    <img class="uk-responsive-height" src="" width="" height="">
                </a> -->

                <nav class="uk-navbar uk-text-center">
                    <div class="bh-navbar-nav-wrapper uk-visible-large">
                        <ul class="uk-navbar-nav">
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="frontpage.html" class="uk-active">Home</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li class="uk-nav-header">Styles</li>
                                        <li>
                                            <a href="?style=default">Light</a>
                                        </li>
                                        <li>
                                            <a href="?style=dark">Dark</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="#">Pages</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="pages-about.html">About Us</a>
                                        </li>
                                        <li>
                                            <a href="pages-team.html">Team</a>
                                        </li>
                                        <li>
                                            <a href="pages-service.html">Service</a>
                                        </li>
                                        <li>
                                            <a href="pages-portfolio.html">Portfolio</a>
                                        </li>
                                        <li>
                                            <a href="pages-contact.html">Contact</a>
                                        </li>
                                        <li>
                                            <a href="pages-faq.html">FAQ</a>
                                        </li>
                                        <li>
                                            <a href="pages-error.html">Error</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="shop.html">Shop</a>
                                <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-3">
                                    <div class="uk-grid uk-dropdown-grid">
                                        <div class="uk-width-medium-1-3">
                                            <ul class="uk-nav uk-nav-navbar">
                                                <li class="uk-nav-header">Layouts</li>
                                                <li>
                                                    <a href="shop-singleproduct.html">Single Product</a>
                                                </li>
                                                <li>
                                                    <a href="shop-cart.html">Cart</a>
                                                </li>
                                                <li>
                                                    <a href="shop-checkout.html">Checkout</a>
                                                </li>
                                                <li>
                                                    <a href="shop-wishlist.html">Wishlist</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="uk-width-medium-2-3">
                                            <div class="uk-panel">
                                                <div class="uk-panel-badge uk-badge uk-badge-danger">Only now - $99</div>
                                                <a href="shop-singleproduct.html"><img src="http://placehold.it/400x300&text=demo" width="400" height="300" alt="Product Image"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="#">Features</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="features-columns.html">Columns</a>
                                        </li>
                                        <li>
                                            <a href="features-positions.html">Positions</a>
                                        </li>
                                        <li>
                                            <a href="features-uikit-elements.html">UIkit Elements</a>
                                        </li>
                                        <li>
                                            <a href="features-theme-elements.html">Theme Elements</a>
                                        </li>
                                        <li>
                                            <a href="features-typography.html">Typhography</a>
                                        </li>
                                        <li>
                                            <a href="features-icons.html">Icons</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="blog.html">Blog</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="blog-singlepost.html">Single Post</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <a href="#offcanvas" class="uk-navbar-toggle uk-hidden-large" data-uk-offcanvas></a>

                </nav>

                <div class="bh-toolbar-left uk-visible-large">
                    <a class="bh-search-toggle" href="#" data-uk-toggle="{target:'.bh-search-bar', animation: 'uk-animation-slide-top'}"><i class="uk-icon-search"></i></a>
                </div>

                <div class="bh-toolbar-right">
                    <div class="uk-panel">
                        <ul class="uk-subnav uk-subnav-line">
                            <li>
                                <a href="#offcanvas-cart" data-uk-offcanvas><i class="uk-icon-shopping-cart uk-margin-small-right uk-hidden-small"></i> $209.80 <span class="uk-badge uk-badge-danger uk-badge-notification uk-margin-small-left">2</span></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="shop-wishlist.html"><i class=" uk-icon-heart"></i></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="#login" data-uk-modal><i class=" uk-icon-user"></i></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="#"><i class="uk-icon-power-off"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="bh-search-bar uk-hidden">
                <form class="uk-search" data-uk-search>
                    <input class="uk-search-field" type="search" placeholder="Search...">
                </form>
                <a href="#" class="uk-close" data-uk-toggle="{target:'.bh-search-bar'}"></a>
            </div>
        </div>

<div class="bh-position-title">
    <div class="uk-container uk-container-center">
        <div class="uk-panel">
            <h1>Harvard Satchel</h1>
        </div>
    </div>
</div>

<div class="bh-position bh-position-default">
    <div class="uk-container uk-container-center">
        <div class="uk-grid" data-uk-grid-margin>

            <div class="uk-width-1-1">

                <ul class="uk-breadcrumb">
                    <li><a href="frontpage.html">Home</a></li>
                    <li><a href="shop.html">Shop</a></li>
                    <li class="uk-active"><span>Harvard Satchel</span></li>
                </ul>

                <article class="uk-article">
                    <div class="uk-grid" data-uk-grid-margin>

                        <div class="uk-width-medium-1-2">
                            <div data-uk-slideshow="{animation: 'scroll', duration: 700}">
                                <div class="uk-grid uk-grid-small" data-uk-grid-margin>

                                    <div class="uk-width-1-1">
                                        <div class="uk-slidenav-position">
                                            <ul class="uk-slideshow">
                                                <li>
                                                    <figure class="uk-overlay uk-overlay-hover">
                                                        <img class="uk-overlay-spin" src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image">
                                                        <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                                        </figcaption>
                                                        <a class="uk-position-cover" href="images/shop_product-08-1.jpg" data-uk-lightbox="{group:'single_product'}"></a>
                                                    </figure>
                                                </li>
                                                <li>
                                                    <figure class="uk-overlay uk-overlay-hover">
                                                        <img class="uk-overlay-spin" src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image">
                                                        <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                                        </figcaption>
                                                        <a class="uk-position-cover" href="images/shop_product-08-2.jpg" data-uk-lightbox="{group:'single_product'}"></a>
                                                    </figure>
                                                </li>
                                                <li>
                                                    <figure class="uk-overlay uk-overlay-hover">
                                                        <img class="uk-overlay-spin" src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image">
                                                        <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                                        </figcaption>
                                                        <a class="uk-position-cover" href="images/shop_product-08-3.jpg" data-uk-lightbox="{group:'single_product'}"></a>
                                                    </figure>
                                                </li>
                                            </ul>
                                            <a data-uk-slideshow-item="previous" href="#" class="uk-slidenav uk-slidenav-previous"></a>
                                            <a data-uk-slideshow-item="next" href="#" class="uk-slidenav uk-slidenav-next"></a>
                                        </div>

                                    </div>

                                    <div class="uk-width-1-3">
                                        <figure class="uk-overlay uk-overlay-hover">
                                            <img class="uk-overlay-spin" src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#" data-uk-slideshow-item="0"></a>
                                        </figure>
                                    </div>

                                    <div class="uk-width-1-3">
                                        <figure class="uk-overlay uk-overlay-hover">
                                            <img class="uk-overlay-spin" src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#" data-uk-slideshow-item="1"></a>
                                        </figure>
                                    </div>

                                    <div class="uk-width-1-3">
                                        <figure class="uk-overlay uk-overlay-hover">
                                            <img class="uk-overlay-spin" src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#" data-uk-slideshow-item="2"></a>
                                        </figure>
                                    </div>

                                </div>
                            </div>

                        </div>

                        <div class="uk-width-medium-1-2">
                            <p class="uk-text-muted uk-h3">
                                <del>$99.90</del>
                                <ins>$79.90</ins>
                            </p>
                            <div>
                                <i class="uk-icon-star uk-text-primary"></i>
                                <i class="uk-icon-star uk-text-primary"></i>
                                <i class="uk-icon-star uk-text-primary"></i>
                                <i class="uk-icon-star uk-text-primary"></i>
                                <i class="uk-icon-star"></i>
                                <a class="uk-margin-small-left" href="#shop-single-details" data-uk-smooth-scroll="{offset: 90}">3 Customer Reviews</a>
                            </div>
                            <hr>
                            <p>Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi.</p>
                            <p>
                                Category: <a href="shop.html">Men,</a> <a href="shop.html">Bags,</a> <a href="shop.html">Satchel</a><br>
                                Tags: <a href="shop.html">Bags,</a> <a href="shop.html">Leather,</a> <a href="shop.html">Brown</a>
                            </p>
                            <hr>
                            <p>
                                <a href="#"><i class="uk-icon-envelope-o"></i></a>
                                <a class="uk-margin-left" href="#"><i class="uk-icon-facebook"></i></a>
                                <a class="uk-margin-left" href="#"><i class="uk-icon-twitter"></i></a>
                                <a class="uk-margin-left" href="#"><i class="uk-icon-google-plus"></i></a>
                            <p>
                            <hr>
                            <form class="uk-form uk-grid">
                                <div class="uk-width-1-1" data-uk-margin>
                                    <button class="uk-button uk-button-large">-</button>
                                    <input class="uk-form-large uk-form-width-mini" type="number" placeholder="1">
                                    <button class="uk-button uk-button-large">+</button>
                                    <div class="uk-button-group">
                                        <button class="uk-button uk-button-primary uk-button-large">Add to cart</button>
                                        <button class="uk-button uk-button-primary uk-button-large"><i class="uk-icon-star"></i></button>
                                    </div>
                                </div>
                            </form>

                        </div>

                    </div>
                </article>

            </div>

            <div class="uk-width-1-1">
                <ul class="uk-tab uk-tab-grid" data-uk-tab="{connect:'#shop-single-details'}">
                    <li class="uk-width-1-2 uk-active"><a href="#">Description</a></li>
                    <li class="uk-width-1-2"><a href="#">Reviews (3)</a></li>
                </ul>
                <ul id="shop-single-details" class="uk-switcher uk-margin">
                    <li>
                        <h3 class="uk-margin-top">Harvard Satchel</h3>
                        <ul>
                            <li>Malesuada fames ac turpis egestas</li>
                            <li>Vestibulum tortor quam, feugiat vitae</li>
                            <li>Donec eu libero sit amet quam egestas semper</li>
                            <li>Mauris placerat eleifend leo</li>
                            <li>Pellentesque habitant morbi tristique senectus</li>
                        </ul>
                        <p>
                            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
                        </p>
                    </li>
                    <li>
                        <div class="uk-grid" data-uk-grid-margin>

                            <div class="uk-width-1-1">
                                <ul class="uk-comment-list uk-margin-top">
                                    <li>
                                        <article class="uk-comment">
                                            <header class="uk-comment-header">
                                                <img class="uk-comment-avatar" src="http://placehold.it/50x50&text=demo" width="50" height="50" alt="User Image">
                                                <h4 class="uk-comment-title">Sarah Miller</h4>
                                                <div class="uk-comment-meta">
                                                    1 day ago
                                                    <span>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star"></i>
                                                    </span>
                                                </div>
                                            </header>
                                            <div class="uk-comment-body">
                                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                                            </div>
                                        </article>
                                    </li>
                                    <li>
                                        <article class="uk-comment">
                                            <header class="uk-comment-header">
                                                <img class="uk-comment-avatar" src="http://placehold.it/50x50&text=demo" width="50" height="50" alt="User Image">
                                                <h4 class="uk-comment-title">Natalia Stone</h4>
                                                <div class="uk-comment-meta">
                                                    1 day ago
                                                    <span>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star"></i>
                                                        <i class="uk-icon-star"></i>
                                                    </span>
                                                </div>
                                            </header>
                                            <div class="uk-comment-body">
                                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                            </div>
                                        </article>
                                    </li>
                                    <li>
                                        <article class="uk-comment">
                                            <header class="uk-comment-header">
                                                <img class="uk-comment-avatar" src="http://placehold.it/50x50&text=demo" width="50" height="50" alt="User Image">
                                                <h4 class="uk-comment-title">John Parker</h4>
                                                <div class="uk-comment-meta">
                                                    1 day ago
                                                    <span>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                        <i class="uk-icon-star uk-text-primary"></i>
                                                    </span>
                                                </div>
                                            </header>
                                            <div class="uk-comment-body">
                                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                            </div>
                                        </article>
                                    </li>
                                </ul>
                            </div>

                            <div class="uk-width-1-1">
                                <h3>Write a review</h3>
                                <form class="uk-form uk-form-stacked">
                                    <div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
                                        <div class="uk-width-medium-1-2">
                                            <label class="uk-form-label" for="form-singleproduct-name">Name</label>
                                            <input type="text" placeholder="Enter your first name..." id="form-singleproduct-name" class="uk-width-1-1 uk-form-large">
                                        </div>
                                        <div class="uk-width-medium-1-2">
                                            <label class="uk-form-label" for="form-singleproduct-mail">E-Mail</label>
                                            <input type="text" placeholder="E-Mail address" id="form-singleproduct-mail" class="uk-width-1-1 uk-form-large">
                                        </div>
                                        <div class="uk-width-1-1">
                                            <label class="uk-form-label" for="form-singleproduct-review">Review</label>
                                            <textarea rows="6" placeholder="Enter you review..." id="form-singleproduct-review" class="uk-width-1-1 uk-form-large"></textarea>
                                        </div>
                                        <div class="uk-width-1-1 uk-clearfix">
                                            <div class="uk-float-left">
                                                Rate the product:
                                                <i class="uk-icon-star uk-text-primary"></i>
                                                <i class="uk-icon-star uk-text-primary"></i>
                                                <i class="uk-icon-star uk-text-primary"></i>
                                                <i class="uk-icon-star"></i>
                                                <i class="uk-icon-star"></i>
                                            </div>
                                            <button class="uk-button bh-button uk-float-right">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </li>
                </ul>
            </div>

            <div class="uk-width-1-1">
                <div class="uk-panel uk-panel-header">
                    <div class="uk-panel-title">Related products</div>

                    <div class="uk-slidenav-position" data-uk-slider>

                        <div class="uk-slider-container">
                            <ul class="uk-slider uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-3">
                                <li>
                                    <div class="uk-panel">

                                        <figure class="uk-overlay uk-overlay-hover bh-overlay-image">
                                            <img src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image">
                                            <img class="bh-overlay-image-hover" src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image Overlay">
                                            <figcaption class="uk-overlay-panel uk-overlay-bottom uk-overlay-slide-bottom bh-padding-remove">
                                                <div>
                                                    <div class="uk-button-group uk-width-1-1">
                                                        <a href="shop-cart.html" class="uk-button uk-button-large uk-width-8-10">Add to cart</a>
                                                        <a href="shop-wishlist.html" class="uk-button uk-button-large uk-width-2-10"><i class="uk-icon-star"></i></a>
                                                    </div>
                                                </div>
                                            </figcaption>
                                            <a class="uk-position-cover" href="shop-singleproduct.html"></a>
                                        </figure>

                                        <div class="uk-float-left uk-margin-top">
                                            <h3 class="uk-margin-small-bottom uk-link-reset"><a href="#">Smart Satchel</a></h3>
                                            <p class="uk-margin-remove"><a href="shop.html">Bags,</a> <a href="shop.html">Satchel</a></p>
                                        </div>
                                        <span class="uk-float-right uk-margin-top uk-text-large">$64.90</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="uk-panel">
                                        <div class="uk-panel-badge uk-badge uk-badge-danger">Sale</div>

                                        <figure class="uk-overlay uk-overlay-hover bh-overlay-image">
                                            <img src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image">
                                            <img class="bh-overlay-image-hover" src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image Overlay">
                                            <figcaption class="uk-overlay-panel uk-overlay-bottom uk-overlay-slide-bottom bh-padding-remove">
                                                <div>
                                                    <div class="uk-button-group uk-width-1-1">
                                                        <a href="shop-cart.html" class="uk-button uk-button-large uk-width-8-10">Add to cart</a>
                                                        <a href="shop-wishlist.html" class="uk-button uk-button-large uk-width-2-10"><i class="uk-icon-star"></i></a>
                                                    </div>
                                                </div>
                                            </figcaption>
                                            <a class="uk-position-cover" href="shop-singleproduct.html"></a>
                                        </figure>

                                        <div class="uk-float-left uk-margin-top">
                                            <h3 class="uk-margin-small-bottom uk-link-reset"><a href="#">Retro Satchel</a></h3>
                                            <p class="uk-margin-remove"><a href="shop.html">Bags,</a> <a href="shop.html">Satchel</a></p>
                                        </div>
                                        <span class="uk-float-right uk-margin-top uk-text-large">
                                            <del>$79.90</del><br class="uk-hidden-large">
                                            <ins>$74.90</ins>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="uk-panel">
                                        <div class="uk-panel-badge uk-badge">Out of stock</div>

                                        <figure class="uk-overlay uk-overlay-hover bh-overlay-image">
                                            <img src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image">
                                            <img class="bh-overlay-image-hover" src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image Overlay">
                                            <figcaption class="uk-overlay-panel uk-overlay-bottom uk-overlay-slide-bottom bh-padding-remove">
                                                <div>
                                                    <div class="uk-button-group uk-width-1-1">
                                                        <a href="shop-cart.html" class="uk-button uk-button-large uk-width-8-10">Add to cart</a>
                                                        <a href="shop-wishlist.html" class="uk-button uk-button-large uk-width-2-10"><i class="uk-icon-star"></i></a>
                                                    </div>
                                                </div>
                                            </figcaption>
                                            <a class="uk-position-cover" href="shop-singleproduct.html"></a>
                                        </figure>

                                        <div class="uk-float-left uk-margin-top">
                                            <h3 class="uk-margin-small-bottom uk-link-reset"><a href="#">Backpack Leather</a></h3>
                                            <p class="uk-margin-remove"><a href="shop.html">Bags,</a> <a href="shop.html">Backpack</a></p>
                                        </div>
                                        <span class="uk-float-right uk-margin-top uk-text-large">$69.90</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="uk-panel">
                                        <figure class="uk-overlay uk-overlay-hover bh-overlay-image">
                                            <img src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image">
                                            <img class="bh-overlay-image-hover" src="http://placehold.it/720x540&text=demo" width="720" height="540" alt="Product Image Overlay">
                                            <figcaption class="uk-overlay-panel uk-overlay-bottom uk-overlay-slide-bottom bh-padding-remove">
                                                <div>
                                                    <div class="uk-button-group uk-width-1-1">
                                                        <a href="shop-cart.html" class="uk-button uk-button-large uk-width-8-10">Add to cart</a>
                                                        <a href="shop-wishlist.html" class="uk-button uk-button-large uk-width-2-10"><i class="uk-icon-star"></i></a>
                                                    </div>
                                                </div>
                                            </figcaption>
                                            <a class="uk-position-cover" href="shop-singleproduct.html"></a>
                                        </figure>

                                        <div class="uk-float-left uk-margin-top">
                                            <h3 class="uk-margin-small-bottom uk-link-reset"><a href="#">Amercia Bag</a></h3>
                                            <p class="uk-margin-remove"><a href="shop.html">Bags,</a> <a href="shop.html">Backpack</a></p>
                                        </div>
                                        <span class="uk-float-right uk-margin-top uk-text-large">$49.90</span>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <a href="#" class="bh-slider-prev" data-uk-slider-item="previous"></a>
                        <a href="#" class="bh-slider-next" data-uk-slider-item="next"></a>

                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
            <footer class="bh-footer uk-text-center-small">
                <div class="uk-container uk-container-center uk-position-relative">
                    <a href="frontpage.html"><img src="http://placehold.it/60x60&text=demo" class="uk-margin-right" alt="Footer Logo" width="60" height="60" data-demo-style></a>
                    <span class="uk-hidden-small">
                        Copyright &copy; 2015 <a href="http://www.bahemian.com" target="_blank">Bahemian</a>. Built with so, so much love <i class="uk-icon-heart uk-text-primary uk-margin-small-left"></i>
                    </span>
                    <a class="bh-topscroller" data-uk-smooth-scroll href="#"><i class="uk-icon-angle-up"></i></a>
                </div>
            </footer>

            <div id="offcanvas" class="uk-offcanvas">
                <div class="uk-offcanvas-bar">
                    <form class="uk-search">
                        <input class="uk-search-field" type="search" placeholder="Search...">
                    </form>
                    <ul class="uk-nav uk-nav-offcanvas">
                        <li class="uk-parent">
                            <a href="frontpage.html">Home</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="?style=default">Light</a>
                                </li>
                                <li>
                                    <a href="?style=dark">Dark</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="#">Pages</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="pages-about.html">About us</a>
                                </li>
                                <li>
                                    <a href="pages-team.html">Team</a>
                                </li>
                                <li>
                                    <a href="pages-service.html">Service</a>
                                </li>
                                <li>
                                    <a href="pages-portfolio.html">Portfolio</a>
                                </li>
                                <li>
                                    <a href="pages-contact.html">Contact</a>
                                </li>
                                <li>
                                    <a href="pages-error.html">Error</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="shop.html">Shop</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="shop-singleproduct.html">Single Product</a>
                                </li>
                                <li>
                                    <a href="shop-cart.html">Cart</a>
                                </li>
                                <li>
                                    <a href="shop-checkout.html">Checkout</a>
                                </li>
                                <li>
                                    <a href="shop-wishlist.html">Wishlist</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="features.html">Features</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="features-columns.html">Columns</a>
                                </li>
                                <li>
                                    <a href="features-uikit-elements.html">UIkit Elements</a>
                                </li>
                                <li>
                                    <a href="features-theme-elements.html">Theme Elements</a>
                                </li>
                                <li>
                                    <a href="features-typography.html">Typhography</a>
                                </li>
                                <li>
                                    <a href="features-icons.html">Icons</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="blog.html">Blog</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="blog-singlepost.html">Single Post</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="offcanvas-cart" class="uk-offcanvas bh-offcanvas-light">
                <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
                    <div class="uk-panel">
                        <h3 class="bh-headline-bottom-border uk-margin-remove"><span>Cart</span></h3>
                        <table class="bh-offcanvas-shopping-cart uk-table uk-table-middle uk-margin-small-top uk-margin-bottom-remove">
                            <tbody>
                                <tr>
                                    <td>
                                        <a href="shop-singleproduct.html">
                                            <img src="http://placehold.it/100x75&text=demo" width="100" height="75" alt="Product Image">
                                        </a>
                                    </td>
                                    <td>
                                        <a class="bh-text-uppercase" href="shop-singleproduct.html">Workboots</a><br>
                                        $119.90
                                    </td>
                                    <td class="uk-text-center"><a href="#"><i class="uk-icon-times"></i></a></td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="shop-singleproduct.html">
                                            <img src="http://placehold.it/100x75&text=demo" width="100" height="75" alt="Product Image">
                                        </a>
                                    </td>
                                    <td>
                                        <a class="bh-text-uppercase" href="shop-singleproduct.html">Wayfarer Glasses</a><br>
                                        $89.90
                                    </td>
                                    <td class="uk-text-center"><a href="#"><i class="uk-icon-times"></i></a></td>
                                </tr>
                            </tbody>
                        </table>
                        <a href="shop-cart.html" class="uk-button uk-width-1-1">View Cart</a>
                        <a href="shop-checkout.html" class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-top">Go to Checkout</a>
                    </div>
                </div>
            </div>

            <div id="login" class="uk-modal">
                <div class="uk-modal-dialog">
                    <a class="uk-modal-close uk-close"></a>

                    <ul class="uk-tab uk-tab-grid" data-uk-tab="{connect:'#login-tab'}">
                        <li class="uk-width-small-1-2 uk-active"><a href="#">Login</a></li>
                        <li class="uk-width-small-1-2"><a href="#">Register</a></li>
                    </ul>

                    <ul id="login-tab" class="uk-switcher uk-margin">
                        <li class="uk-active">
                            <form class="uk-form">
                                <div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
                                    <div class="uk-width-1-1 uk-text-center">
                                        <h3>I'm already a member</h3>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr<br> sed diam nonumy eirmod tempor invidunt.</p>
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Username" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Password" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <label><input type="checkbox"> Remember me</label>
                                        <a class="uk-margin-left" href="#">Lost Password?</a>
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <button class="uk-button uk-text-center">Login</button>
                                    </div>
                                </div>
                            </form>
                        </li>
                        <li>
                            <form class="uk-form">
                                <div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
                                    <div class="uk-width-1-1 uk-text-center">
                                        <h3>I'm new here</h3>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr<br> sed diam nonumy eirmod tempor invidunt.</p>
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Username" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Password" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <button class="uk-button uk-text-center">Register</button>
                                    </div>
                                </div>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- vendor scripts -->
            <script src="assets/jquery.js"></script>
            <script src="assets/jquery.velocity.min.js"></script>
            <script src="assets/uikit/js/uikit.js"></script>
            <script src="assets/holder.js"></script>
            <script src="assets/countUp.js"></script>
            <script src="assets/uikit/js/components/accordion.min.js"></script>
            <script src="assets/uikit/js/components/grid.min.js"></script>
            <script src="assets/uikit/js/components/lightbox.min.js"></script>
            <script src="assets/uikit/js/components/search.min.js"></script>
            <script src="assets/uikit/js/components/slideshow.min.js"></script>
            <script src="assets/uikit/js/components/slideshow-fx.min.js"></script>
            <script src="assets/uikit/js/components/sticky.min.js"></script>
            <script src="assets/uikit/js/components/slider.min.js"></script>

            <!-- theme scripts -->
            <script src="js/theme.js"></script>

            <!-- demo related script - remove it!  -->
            <script src="demo.js"></script>
    </body>
</html>
